<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<!-- 
	      监视属性:
		   1.vue对象的配置项
		   2.vm.$watch
		   
		   immediate: true, //初始化时执行一次函数
		   deep: true, //深度监视
		   
		   如果不需要配置项,就用简写方式
		   //简写
		   firstName(val) {
		   	this.fullName = val + this.lastName;
		   },
		   lastName(val) {
		   	this.fullName = this.firstName + val;
		   }
		   
		   vm.$watch('firstName', function(newVal, oldVal) {
		   	console.log("新值:" + newVal);
		   	console.log("旧值:" + oldVal);
		   }) 
		   
		   如果需要配置项,就用对象方式
		   vm.$watch('firstName', {
				immediate: true, //初始化时执行一次函数
				deep: true, //深度监视
				handler(newVal, oldVal) {
					console.log("新值:" + newVal);
					console.log("旧值:" + oldVal);
				}
		   })
	    -->
	</head>
	<body>
		<div id="app">
			<h3>firstName:<input type="text" v-model="firstName" /></h3>
			<h3>lastName:<input type="text" v-model="lastName" /></h3>
			<h3>{{fullName}}</h3>
			<h1>{{firstName}}</h1>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					firstName: 'Foo',
					lastName: 'Bar',
					fullName: 'Foo Bar',
					a: {
						b: {
							c: true
						}
					}
				},
				// watch: {
				// firstName: function(val) {
				// 	console.log(val)
				// 	this.fullName = val + this.lastName;
				// },
				// lastName: function(val) {
				// 	console.log(val)
				// 	this.fullName = this.firstName + val;
				// }
				//简写
				firstName(val) {
					this.fullName = val + this.lastName;
				},
				lastName(val) {
					this.fullName = this.firstName + val;
				}
			}
			})
			/* vm.$watch('firstName', function(newVal, oldVal) {
				console.log("新值:" + newVal);
				console.log("旧值:" + oldVal);
			}) */

			/* vm.$watch('firstName', {
				immediate: true, //初始化时执行一次函数
				deep: true, //深度监视
				handler(newVal, oldVal) {
					console.log("新值:" + newVal);
					console.log("旧值:" + oldVal);
				}
			}) */


			// vm.$watch('a', {
			// 	immediate: true, //初始化时执行一次函数
			// 	// deep: true, //深度监视
			// 	handler(newVal, oldVal) {
			// 		console.log("新值:" + newVal);
			// 		console.log("旧值:" + oldVal);
			// 	}
			// })
		</script>
	</body>
</html>
